import { Page } from '@/components';
import AppMarkdown from '@/doc/components/AppMarkdown';
import { useEffect } from 'react';
import styles from './styles.module.less';

const QuickStart = () => {
  const markdown = `
  # Magic UI For React

  > 基于React和vite构建的ReactUI组件库，主要用于个人开发中后台产品。
  
  ## 特性

  + 深色浅色模式
  + 个人独立开发，代码风格具有统一标准。
  + 项目完全开源，可通过npm(yarn)等包管理工具免费使用。
  + 组件样式单独存放，可单独自定义替换。
  + 每个组件为独立的一部分，不通过npm(yarn)等包管理器下载，也可以通过复制组件单独文件夹进行使用
  + 每个组件之间互不干扰，避免造成修改当然组件影响其他组件。
  + 绝大部分组件功能都是通过自定义代码实现，极少使用第三方库，避免在复制使用时导入过多依赖。

  ## 缺点

  + Form表单和Table列表只有基础功能不适合做大型项目
  + 不支持低版本浏览器
  + react、react-router版本较高不支持低版本

  ## 兼容环境

  + 现代浏览器
  + 不支持IE浏览器
  + react > 18 react-router > 6

  ## 安装

  ### 使用 npm 或 yarn 安装

  #### 我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用

  ~~~shell
  npm install magic-ui-react --save
  ~~~

  ~~~shell
  yarn add magic-ui-react --save
  ~~~

  #### 导入样式

  > 可将 magic-ui-react/style 或者 magic-ui-react/theme 复制到本地，通过本地修改实现自定义。

  ~~~tsx
  // 组件样式
  import 'magic-ui-react/style'
  // 图标文件
  import 'magic-ui-react/icons/css'
  // 主题配色文件
  import 'magic-ui-react/theme'
  // 公共cssClass文件
  import 'magic-ui-react/globalLess'
  ~~~

  ## TypeScript

  Magic UI For React 使用 TypeScript 进行书写并提供了完整的定义文件。（不要引用 @types）。

  `

  const getFile = async () => {
  }

  useEffect(() => {
    getFile()
  }, [])

  return (
    <Page className={styles.QuickStart}>
      <AppMarkdown>
        {markdown}
      </AppMarkdown>
    </Page>
  )
}
export default QuickStart